<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            width: 23%;
            margin: 1%;
            box-shadow: 0 0 1px 1px #ddd;
            text-align: center;
        }

        img {
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="searchBox">
        <input type="text" class="kw">
        <button class="searchBtn">搜索</button>
    </div>

    <div class="orderBox">
        <select class="orderPrice">
            <option value="1">按照价格升序</option>
            <option value="2">按照价格降序</option>
        </select>

        <select class="orderXL">
            <option value="1">按照销量升序</option>
            <option value="2">按照销量降序</option>
        </select>

        <!-- <button class="orderBtn">搜索</button> -->
    </div>

    <ul>
        <!-- <li>
            <img src="" alt="">
            <h3></h3>
            <p></p>
            <strong></strong>
        </li> -->
    </ul>

    <div class="page">
        <span class="prev off">&lt;</span>
        <strong class="pageAll">共n页</strong>
        <span class="next">&gt;</span>
    </div>



    <script src="../js/ajax.js"></script>
    <script>


        // all 接口共有5个参数

        // 排序的时候
        //     价格排序    orderName  /  orderType
        //     销量排序    orderName  /  orderType


        // 搜索的时候
        //    数据回到初始状态
        //       page=1   orderName    orderType




        const oUl = document.querySelector('ul');


        // 关键字可以是空
        let kw = '';
        let num = 3;
        let page = 1;
        // 默认是id升序
        let orderName = 'goods_id';
        // 默认是id升序
        let orderType = 1;

        // 总页数
        let total;

        // 页面打开的时候渲染所有的数据
        render();

        // 搜索
        const oKw = document.querySelector('.kw');
        const oSearch = document.querySelector('.searchBtn');

        oSearch.onclick = function () {
            // 获取关键字
            kw = oKw.value;
            // 判断非空
            if (kw) {
                // 翻页了以后  page会变大
                page = 1;
                orderName = 'goods_id';
                orderType = 1;
                oPrev.classList.add('off');
                oNext.classList.remove('off');
                render();
            }
        }



        // 排序
        // const oOrder = document.querySelector('.order');
        const oPrice = document.querySelector('.orderPrice');
        const oXL = document.querySelector('.orderXL');

        oPrice.onchange = function () {
            orderType = oPrice.value;  // 1 2

            // goods_price 必须和数据库中的字段保持一致  
            orderName = 'goods_price';
            render();
        }

        oXL.onchange = function () {
            orderType = oXL.value;  // 1 2

            // goods_xl 必须和数据库中的字段保持一致  
            orderName = 'goods_xl';
            render();
        }




        // 翻页
        const oPage = document.querySelector('.page');
        const oPrev = document.querySelector('.prev');
        const oNext = document.querySelector('.next');
        // 事件委托
        oPage.onclick = function (e) {
            const target = e.target;   // 此处省略兼容????????
            // 下翻页
            if (target.className === 'next') {
                page++;
                if (page >= total) {
                    target.classList.add('off');
                }
                render();

                // 给上翻页清除off
                if (oPrev.classList.contains('off')) {
                    oPrev.classList.remove('off');
                }
                return;
            }
            // 上翻页
            if (target.className === 'prev') {
                page--;
                if (page === 1) {
                    target.classList.add('off');
                }
                render();

                // 给下翻页清除off
                if (oNext.classList.contains('off')) {
                    oNext.classList.remove('off');
                }
            }
        }









        function render(path) {
            ajax({
                path: `../php/all.php?kw=${kw}&num=${num}&page=${page}&orderName=${orderName}&orderType=${orderType}`,
                success: res => {
                    console.log(res);
                    const { status, msg, data } = res;
                    if (status) {
                        let html = '';
                        data.forEach(v => {
                            const { goods_title, goods_des, goods_price, goods_img, goods_id } = v;
                            html += `
                                <li>
                                    <a href="./04detail.html?id=${goods_id}">
                                        <img src="${goods_img}" alt="">
                                        <h3>${goods_title}</h3>
                                        <p>${goods_des}</p>
                                        <strong>${goods_price}</strong>
                                    </a>
                                </li>
                            `
                        })
                        oUl.innerHTML = html;

                        // 显示页数
                        const oPageAll = document.querySelector('.pageAll');

                        // 页数不能被整除  ---- 向上取整
                        total = Math.ceil(res.total / num)
                        oPageAll.innerHTML = '总共' + total + '页';


                    } else {
                        alert(msg);
                    }
                }
            })
        }


    </script>

</body>

</html>